<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <title>添加课程</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--<link th:href="@{/static/css/semantic.css}" rel="stylesheet" type="text/css">-->
    <script th:src="@{/static/js/jquery-3.1.1.min.js}"></script>
    <script th:src="@{/static/js/template-web.js}"></script>
    <link th:href="@{/static/css/qinstyle.css}" rel="stylesheet">
    <link th:href="@{/static/layui-v2.5.5/css/layui.css}" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" th:src="@{/static/layui-v2.5.5/layui.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/common.js}"></script>
    <script th:src="@{/static/js/semantic.min.js}"></script>
    <!--semantic-ui 必须用这个 用路径下的不行 会缺失样式-->
    <link type="text/css" href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <!--<script type = "text/html" id = "hrefa">
        <a class = 'icon item' onclick = "{{ ftname }}({{ next }}, '{{ data.tCase }}', '{{ name }}')"><i
                class = 'right chevron icon'></i></a>
    </script>
    <script type = "text/html" id = "firstHref">
        <a class = 'icon item' onclick = "{{ ftname }}(1, '{{ ttCase.toString() }}', '{{ name }}')">首页</i></a>
    </script>
    <script type = "text/html" id = "before">
        <a class = 'icon item' onclick = "{{ ftname }}({{ before }}, '{{ data.tCase }}', '{{ name }}')"><i
                class = 'left chevron icon'></i></a>
    </script>-->
    <script>
        var content = [{title: "人体的奥秘"}, {title: "如何学好英语"}, {title: "大学生创新创业指导"}, {title: "婚恋指导"}, {title: "电影的艺术"}, {title: "戏剧欣赏"}, {title: "中药理学"}, {title: "网页设计"}, {title: "计算机网络导论"}, {title: "化妆品学"}, {title: "化学原理"}, {title: "大学生计算机基础课程"}, {title: "人工智能概论"}, {title: "音乐鉴赏"}, {title: "牛顿力学解析"}, {title: "天文学"}, {title: "药品的解析"}, {title: "深入JVM"}, {title: "爬虫原理"}, {title: "浮力概述"}, {title: "深入分布式"}, {title: "Shiro与spring security"}, {title: "zookeeper"}, {title: "有趣的python"},{title: "人体系统论"},{title: "药草认识大全"},{title: "做一个健康的程序员"},{title: "脱发原理"},{title: "引力的奥秘"}// etc
        ];
        function getName() {
            var ele = $("#user");
            var name1;
            if (ele.length > 0){
                name1 = ele.html();
            }
            //console.log("name1:"+ name1);
            return name1;
        }

        $(function () {
            //监听搜索框
            $("#search").mouseover(function () {
                //alert("sas");
                $("#search").search({
                    source: content,
                });
            });
            //var name = document.getElementById("user").innerHTML;  这个语句有问题 如果没有该id值 直接报错。而不是返回空
            //console.log(name);
        });
        
        function reload(){
            window.location.reload();
        }

        //弹框提示。
        function show() {
            //console.log('******************* ' + courseId + "--" + flag + "--" + name + "--" + ftnamme + "--" + page + "--" + tCase);
            var courseName = $("#courseName").val();
            var collegeId = $("#collegeId").val();
            var courseType = $("#courseType").val();
            var teacher = $("#teacher").val();
            var score = $("#score").val();
            var stock = $("#stock").val();
            var address = $("#address").val();
            var description = $("#description").val();
            if(courseName == ""){
                document.getElementById("courseName").style.cssText='border:1px solid red';
                $("#courseName").attr("placeholder","课程名称不能为空");
                return;
            }
            if(collegeId == ""){
                document.getElementById("collegeId").style.cssText='border:1px solid red';
                $("#collegeId").attr("placeholder","此处不能为空");
                return;
            }
            if(courseType == ""){
                document.getElementById("courseType").style.cssText='border:1px solid red';
                $("#courseType").attr("placeholder","课程类型不能为空");
                return;
            }
            if(teacher == ""){
                document.getElementById("teacher").style.cssText='border:1px solid red';
                $("#teacher").attr("placeholder","此处不能为空");
                return;
            }
            if(score == ""){
                document.getElementById("score").style.cssText='border:1px solid red';
                $("#score").attr("placeholder","此处不能为空");
                return;
            }
            if(stock == ""){
                document.getElementById("stock").style.cssText='border:1px solid red';
                $("#stock").attr("placeholder","此处不能为空");
                return;
            }
            if(address == ""){
                document.getElementById("address").style.cssText='border:1px solid red';
                $("#address").attr("placeholder","此处不能为空");
                return;
            }
            $('#alertUI').modal({
                onApprove: () => {
                    //console.log(courseId + "--" + flag + "--" + name + "--" + ftnamme + "--" + page + "--" + tCase);
                    addCourse(courseName,collegeId,courseType,teacher,score,stock,address,description);
                }
            }).modal('show');
        }

        //添加课程
        function addCourse(courseName,collegeId,courseType,teacher,score,stock,address,description) {
            $.ajax({
                url: "course/addCourseByAdmin", // 请求路径
                type: "POST", //请求方式
                data: {
                    "courseName": courseName, 
                    "courseType": courseType,
                    "collegeId":collegeId,
                    "teacher": teacher,
                    "score":score,
                    "stock":stock,
                    "address":address,
                    "description":description}, //  方式二 推荐使用这种方式
                success: function (data) {  //这里的data可以随便命名 不过还是有点规则好一些
                    $('#msg').text(data.msg);
                    $('#alertMsg').modal('show');
                    reload();
                },//响应成功后的回调函数
                error: function () {
                    alert("出错啦...")
                },//表示如果请求响应出现错误，会执行的回调函数
            });
            //console.log(name + "----" + courseId + "----" + flag);
        };

        //监听搜索框回车
        document.onkeydown = function (event) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 13) {
                sub();
            }
        };

        function sub(){
            //var searchText = $("#searchText").val();
            var searchText = document.getElementById("searchText").value;
            //console.log(searchText);
            if (searchText.length > 0) {
                //alert("搜索框回车监听:" + searchText + "---");
                selectByCourseName(1,searchText);
            }else{
                $("#msg").html("请输入搜索内容");
                $("#alertMsg").modal('show');
            }
        };
    </script>
    <style>
        html, body {
            height: 100%;
            width: 100%;
            overflow: auto;
            margin: 0;
        }

        html {
            overflow-y: scroll;
        }
    </style>
</head>
<body>
<!--主容器-->
<div class="ui container" th:width="1500px">

    <div class="ui segment" id="index-header-nav" th:fragment="nav-menu">
        <div class="ui secondary menu" sec:authorize="isAuthenticated()">  <!--如果登录了 就展示相关信息-->
            <a class="item" th:href="@{/}">首页</a>
            <span class="hidden" hidden="hidden" id="user" sec:authentication="name"></span>
            <div class="right menu" sec:authorize="hasAuthority('admin')">
                <div class="right menu"> <!--展示相对于权限的东西-->
                    <a class="item" th:href="@{/courseManage}">
                        <i class="table icon"></i>
                        课程管理
                    </a>
                    <a class="item" th:href="@{/manager}">
                        <i class="icon user"></i>
                        学生选课统计
                    </a>
                    <a class="item">
                        欢迎你,<span sec:authentication="name"></span>
                    </a>
                    <a class="item" href="/logout">
                        <i class="sign-out icon"></i>注销
                    </a>
                </div>
            </div>

        </div>
    </div>
    <div class="ui small test modal" id="alertUI">
        <i class="close icon"></i>
        <div class="header">
            退选课程
        </div>
        <div class="content">
            <p>你确定要添加课程吗？</p>
        </div>
        <div class="actions">
            <div class="ui negative button">
                取消
            </div>
            <div class="ui positive button">
                确定
            </div>
        </div>
    </div>
    <div class="ui small test modal" id="alertMsg">
        <i class="close icon"></i>
        <div class="header">
            信息
        </div>
        <div class="content">
            <p id="msg"></p>
        </div>
        <div class="actions">
            <div class="ui positive button" onclick="">
                确定
            </div>
        </div>
    </div>

    <div class="ui segment" style="text-align: center">
        <h3>网上在线选课系统</h3>
    </div>
    
    <div class="ui segment" style="text-align: center">
        <h2>添加课程</h2>
    </div>

    <div class="ui segment" th:fragment="nav-menu">
        <span class="ui secondary menu">
            <div id="search" class="ui search">
            <div class="ui icon input">
                <input id="searchText" class="prompt" type="text" placeholder="搜索课程">
                <span class="ui icon button">
                <i class="search icon"></i><a href="#">搜索</a>
                </span>
                <!--<span class="right menu">
                   <a class="item" th:href="@{/addCourse}">
                       <i class="plus icon"></i>
                       添加课程
                   </a>
                </span>-->
            </div>
            <div class="results"></div>
            </div>
        </span>
        <form class="ui form">
            <h4 class="ui dividing header">课程信息</h4>
            <div class="field">
                <label>课程名称</label>
                <div class="two fields">
                    <div class="field">
                        <input type="text" id="courseName" name="courseName" placeholder="请输入课程名称">
                    </div>
                    <div class="field">
                        <!--<input type="text" name="shipping[last-name]" placeholder="">-->
                    </div>
                </div>
            </div>
            <div class="two fields">
                <div class="field">
                    <label>课程所属学院</label>
                    <select class="ui fluid dropdown" id="collegeId" name="collegeId">
                        <option value="1" th:checked="true">计算机学院</option>
                        <option value="2" >中药学院</option>
                        <option value="3" >外国语学院</option>
                        <option value="4" >健康学院</option>
                        <option value="5" >物理学院</option>
                        <option value="6" >艺术学院</option>
                        <option value="7" >信息学院</option>
                        <option value="8" >化学学院</option>
                    </select>
                </div>
                <div class="field">
                    <label>课程类型</label>
                    <select class="ui fluid dropdown" id="courseType" name="courseType">
                        <!--人文科学类    公共艺术类    创新创业类    数学科学类    程序艺术类    自然科学类    限定艺术类-->
                        <option value="人文科学类" >人文科学类</option>
                        <option value="公共艺术类" >公共艺术类</option>
                        <option value="创新创业类" >创新创业类</option>
                        <option value="数学科学类" >数学科学类</option>
                        <option value="程序艺术类" >程序艺术类</option>
                        <option value="自然科学类" >自然科学类</option>
                        <option value="限定艺术类" >限定艺术类</option>
                    </select>    
                </div>
            </div>
            <div class="two fields">
                <div class="field">
                <label>任课老师姓名</label>
                    <input type="text" id="teacher" name="teacher" placeholder="请输入任课老师名称">
                </div>
                <div class="field">
                <label>课程学分</label>
                <select class="ui fluid dropdown" id="score" name="score">
                    <option value="1" >1</option>
                    <option value="2" >2</option>
                    <option value="3" >3</option>
                    <option value="4" >4</option>
                    <option value="5" >5</option>
                </select>
                </div>
            </div>
            <div class="field">
                <label>课程容量</label>
                <div class="two fields">
                    <div class="field">
                        <input type="text" id="stock" name="stock" placeholder="请输入学生人数">
                    </div>
                    <div class="field">
                        <!--<input type="text" name="shipping[last-name]" placeholder="">-->
                    </div>
                </div>
            </div>
            <div class="field">
                <label>上课时间及地址</label>
                <div class="field">
                    <input type="text" id="address" name="address" placeholder="请输入上课时间及地址">
                </div>
            </div>
            <div class="field">
                <label>课程描述</label>
                <textarea rows="2" style="margin-top: 0px; margin-bottom: 0px; height: 65px;" id="description" name="description"></textarea>
            </div>
            <div class="ui button" tabindex="0" onclick="show()">提交信息</div>
        </form>
    </div>
</div>
</body>
</html>